import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart' show kIsWeb;
import 'package:flutter_hplus/components/tables/index.dart';
import 'widgets/h_data_column.dart';
import 'h_data_table.dart';

class DataTableDemo extends StatefulWidget {
  const DataTableDemo({super.key});

  @override
  State<DataTableDemo> createState() => _DataTableDemoState();
}

class _DataTableDemoState extends State<DataTableDemo> {
  // 是否显示原生滚动条
  bool _showNativeScrollbar = true;

  @override
  Widget build(BuildContext context) {
    // 模拟数据
    final List<Map<String, dynamic>> demoData = List.generate(
      50,
      (index) => {
        'id': index + 1,
        'name': '用户 ${index + 1}',
        'email': 'user${index + 1}@example.com',
        'phone': '1380000${10000 + index}',
        'address': '北京市朝阳区某某路 ${index + 1} 号',
        'createdAt': DateTime.now().subtract(Duration(days: index)).toString().substring(0, 10),
        'status': index % 3 == 0 ? '活跃' : (index % 3 == 1 ? '离线' : '忙碌'),
        'department': '部门 ${(index % 5) + 1}',
        'position': '职位 ${(index % 4) + 1}',
        'salary': 5000 + (index * 100),
        'joinDate': DateTime.now().subtract(Duration(days: index * 30)).toString().substring(0, 10),
        'projects': '项目数: ${(index % 10) + 1}',
        'rating': (index % 5) + 1,
      },
    );

    // 列定义
    final List<HDataColumn> columns = [
      const HDataColumn(
        label: 'ID',
        field: 'id',
        numeric: true,
        width: 80,
      ),
      const HDataColumn(
        label: '姓名',
        field: 'name',
        width: 120,
      ),
      const HDataColumn(
        label: '邮箱',
        field: 'email',
        minWidth: 180,
        maxWidth: 250,
        flex: 1.5,
      ),
      const HDataColumn(
        label: '电话',
        field: 'phone',
        width: 150,
      ),
      const HDataColumn(
        label: '地址',
        field: 'address',
        minWidth: 200,
        flex: 2,
      ),
      const HDataColumn(
        label: '创建日期',
        field: 'createdAt',
        width: 120,
      ),
      const HDataColumn(
        label: '状态',
        field: 'status',
        width: 100,
      ),
      const HDataColumn(
        label: '部门',
        field: 'department',
        width: 120,
      ),
      const HDataColumn(
        label: '职位',
        field: 'position',
        width: 150,
      ),
      const HDataColumn(
        label: '薪资',
        field: 'salary',
        numeric: true,
        width: 120,
      ),
      const HDataColumn(
        label: '入职日期',
        field: 'joinDate',
        width: 120,
      ),
      const HDataColumn(
        label: '项目',
        field: 'projects',
        width: 100,
      ),
      const HDataColumn(
        label: '评分',
        field: 'rating',
        numeric: true,
        width: 80,
      ),
    ];

    return Scaffold(
      appBar: AppBar(
        title: const Text('数据表格演示'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Padding(
              padding: const EdgeInsets.only(bottom: 16.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    '表格滚动演示',
                    style: Theme.of(context).textTheme.titleLarge,
                  ),
                  if (kIsWeb)
                    Row(
                      children: [
                        Text('显示原生滚动条'),
                        Switch(
                          value: _showNativeScrollbar,
                          onChanged: (value) {
                            setState(() {
                              _showNativeScrollbar = value;
                            });
                          },
                        ),
                      ],
                    ),
                ],
              ),
            ),
            Text(
              '说明：表格支持水平和垂直滚动，可以直接拖拽滚动条或使用鼠标滚轮进行滚动。',
              style: Theme.of(context).textTheme.bodyMedium,
            ),
            const SizedBox(height: 16),
            Expanded(
              child: kIsWeb && _showNativeScrollbar
                ? Theme(
                    // 使用系统原生滚动条样式
                    data: Theme.of(context).copyWith(
                      scrollbarTheme: ScrollbarThemeData(
                        thumbVisibility: WidgetStateProperty.all(true),
                        trackVisibility: WidgetStateProperty.all(true),
                        thickness: WidgetStateProperty.all(16.0),
                        interactive: true,
                      ),
                    ),
                    child: HDataTable(
                      columns: columns,
                      data: demoData,
                      onRowTap: (row) {
                        print('点击了行: ${row['name']}');
                      },
                    ),
                  )
                : HDataTable(
                    columns: columns,
                    data: demoData,
                    onRowTap: (row) {
                      print('点击了行: ${row['name']}');
                    },
                  ),
            ),
          ],
        ),
      ),
    );
  }
} 